<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">


    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../lib/swiper/swiper-3.4.2.min.css">
</head>
<body>

    <div class="my-content" id="my-content">


        <div class="swiper-container">
            <div class="swiper-wrapper"  >
                <div class="swiper-slide" >
                    <img src="http://shop.vsharp.top/Uploads/goods_img/5a6eefae7f0f3.jpg" alt="" >
                </div>
                <!--<div class="swiper-slide">-->
                    <!--<<img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">-->
                <!--</div>-->
                <!--<div class="swiper-slide">-->
                    <!--<img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">-->
                <!--</div>-->



            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination">

            </div>
        </div>

        <div class="detail_header">
            <div class="header_label">
                <p>{{detail}}</p>
                <p>{{price}}</p>
            </div>
            <div></div>
        </div>


    </div>

    <!--&lt;!&ndash;tabbar&ndash;&gt;-->
    <!--<div class="my-tab">-->
        <!--<div class="my-tabbar">-->
            <!--<a href="" class="tabbar-item active">-->
                <!--<span></span>-->
                <!--<div class="item-icon">-->
                    <!--<img src="../images/index_press.png" alt="">-->
                <!--</div>-->
                <!--<p class="item-label">首页</p>-->
            <!--</a>-->
            <!--<a href="" class="tabbar-item">-->
                <!--<span></span>-->
                <!--<div class="item-icon">-->
                    <!--<img src="../images/order.png" alt="">-->
                <!--</div>-->
                <!--<p class="item-label">订单</p>-->
            <!--</a>-->
            <!--<a href="" class="tabbar-item">-->
                <!--<span></span>-->
                <!--<div class="item-icon">-->
                    <!--<img src="../images/me.png" alt="">-->
                <!--</div>-->
                <!--<p class="item-label">我</p>-->
            <!--</a>-->
        <!--</div>-->

    <!--</div>-->






<script src="../js/axios.js"></script>
    <script src="../lib/vue.js"></script>
    <script type='text/javascript' src='lib/swiper/swiper-3.4.2.jquery.min.js'></script>
<script type='text/javascript' src='../lib/jquery-2.1.4.js'></script>
    <script type='text/javascript' src='../lib/jquery.params.js'></script>
    <script >
        window.loaded = function (res) {
            var mySwiper = new Swiper('.swiper-container', {
                autoplay: 3000,//可选选项，自动滑动
//            loop: true,

                // 如果需要分页器
                pagination: '.swiper-pagination',


            });

        };


    </script>
<script >
    var app = new Vue({
        el: '#my-content',
        data: {
            message: "",
            imgList:[],

        },
        beforeCreate: function (res) {
            var id = $.query.get("goodsid");
//            alert(typeof(id));
//            console.log(id);
            //请求商品数据
            axios.get("http://shop.vsharp.top/api/Goods/getGoodsInfo?id=" + id)
                    .then(function (response) {
                console.log(response.data.result);

            }).catch(function (error) {

            });


        },
        created: function () {


        },
        methods: {


        },
        beforeMount: function () {

        },
        mounted: function () {

        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message)
        }
    });
</script>
</body>


</html>